<script setup>
import { ref } from 'vue'
//引入VueOfficeDocx组件
import VueOfficeDocx from '@vue-office/docx'
//引入相关样式
import '@vue-office/docx/lib/index.css'
import {saveAs} from 'file-saver'
import {Packer,Document,Paragraph } from '@vue-office/docx'
const dialogVisible = ref(false)
const open=()=>{
    dialogVisible.value=true
}
defineProps({
    isPersonFlag: {
      type: Boolean,
      required: true
    }
})
defineExpose({
  open
})
const personDocx=ref("./public/个人报告模板.docx")
const schoolDocx=ref("./public/校级报告模板.docx")
const renderedHandler = () => {
    console.log("渲染完成");
};

const errorHandler = () => {
    console.log("渲染失败");
};
const exportToWord = () => {
    const data = {
        name: ref('John Doe'),
        age: ref(30),
        occupation: ref('Developer')
    };
}
const handleClose = () => {
    dialogVisible.value = false
  }
</script>
<template>
    <el-dialog
      v-model="dialogVisible"
      :title="isPersonFlag?'个人报告':'学校报告'"
      width="90%"
      :before-close="handleClose"
    >
    <vue-office-docx
     :src="isPersonFlag?personDocx:schoolDocx"
    style="height: 100vh;"
    @rendered="renderedHandler"
    @error="errorHandler"
    />
    </el-dialog>
  </template>
  <style scoped>

  </style>